<template>
    <mescroll-uni :ref="'mescrollRef' + inx" @init="mescrollInit" height="100%" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
        <goodsWaterfallFlow :allList="goodsListTwo" @goodsFlowCall="goodsFlowBtn" :emptyType="false">
        </goodsWaterfallFlow>
    </mescroll-uni>
</template>

<script>
import MescrollMixin from '@/components/mescroll/mescroll-mixins.js'
import MescrollMoreItemMixin from '@/components/mescroll/mixins/mescroll-more-item.js'
import goodsWaterfallFlow from '@/common/components/global/goods-waterfall-flow.vue' // 瀑布流组件
export default {
	mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
	data() {
		return {
			mescroll: null,
			downOption: {
				auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				auto: false, // 不自动加载
				noMoreSize: 4, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
					tip: '~ 空空如也 ~' // 提示
				}
			},
			goodsListTwo: []
		}
	},
	props: {
		inx: {
			type: [Number, String]
		},
		tabArr: {
			type: Array,
			default: () => {
				return []
			}
		},
		current: {
			type: Number,
			default: 1
		}
	},
	watch: {
		current() {
			let e = {
				num: 1,
				size: 10
			}
			// console.log(this.current)
			if (this.inx === this.current) {
				this.getGoodsList(e)
			}
		}
	},
	components: {
		goodsWaterfallFlow
	},
	mounted() {

	},
	onShow() {

	},
	methods: {
		// 初始化
		mescrollInit(e) {
			this.mescroll = e
		},
		/* 下拉刷新的回调 */
		downCallback(e) {
			// console.log('logdownCallbackdownCallback', e);
			// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
			// loadSwiper();
			// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			// uni.showLoading({
			// 	title: '加载中'
			// });
			this.mescroll.resetUpScroll()
		},
		/* 上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(e) {
			// 联网加载数据
			// this.tabArr[this.inx].category_id
			if (this.inx === this.current) {
				this.getGoodsList(e)
			}
		},
		getGoodsList(e) {
			let goodsObj = {
				page: e.num,
				page_size: e.size,
				category_id: this.tabArr[this.inx].category_id,
				category_level: 1,
				web_city: 0
			}
			this.$Apis
				.getGoodsSku(goodsObj)
				.then(res => {
					this.mescroll.endSuccess(res.list.length)
					setTimeout(() => {
						// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
						// 设置列表数据
						if (e.num == 1) this.goodsListTwo = [] // 如果是第一页需手动制空列表
						this.goodsListTwo = this.goodsListTwo.concat(res.list) // 追加新数据
						setTimeout(() => {
							uni.hideLoading()
						}, 100)
					}, 200)
				})
				.catch(err => {
					// 联网失败, 结束加载
					this.mescroll.endErr()
				})

		},
		goodsFlowBtn(val) {
			this.$Router.push({
				path: '/shopPages/goods/detail',
				query: {
					goods_id: val.sku_id,
					is_id: val.sku_id,
					type: 1
				}
			})
		}
	}
}
</script>

<style lang="scss">
/deep/.mescroll-uni {
    height: 100% !important;
}
</style>
